<template>
    <div class="search">
        <input class="search-input" type="text" placeholder="Search" v-model="searchInput"/>
        <button class="c-btn btn-primary" @click="search">搜索</button>
    </div>
</template>

<script>
    import { ref, watch } from 'vue';
    import { useRouter } from 'vue-router';

    export default {
        name: "Search",
        setup(props, context) {
            const searchInput = ref(''),
                  router = useRouter();

            const search = () => {
                context.emit('search', searchInput.value)
            }

            watch(() => {
                return router.currentRoute.value.name;
            }, (value) => {
                searchInput.value = ''
            })

            return {
                searchInput,
                search,
            }
        }
    }
</script>

<style lang="scss" scoped>
.search {

    .search-input {
        border-radius: 5px;
        border: 0;
        padding: 6px;
        border: 1px solid #d9d9d9;
        vertical-align: middle;
    }
}
</style>